<template>
<uni-shadow-root class="partials-pintuan_popup-index"><view class="bg"></view>
  <view class="close" @click="closeFun">x</view>
  <view class="content">
      <view class="head_title"><text class="head_title_text">正在拼团</text></view>
      <view class="box_share_pintuan">
         <scroll-view scroll-y="true" class="pintuan_list"> 
           <view v-for="(item,index) in (pintuanListData)" :key="item.index" class="pintuan_item">
              <view class="pintuan_item_left">
                <image class="user_head" :src="item.createPlatformUserIcon"></image>
                <view class="pintuan_item_data">
                    <view class="user_data">
                      <text class="user_name">{{item.createPlatformUserName}}</text>
                      <view class="user_num">还差<text :style="'color:'+(setting.platformSetting.defaultColor)">{{item.userCountLimit-item.attendedUserCount}}</text>人</view>
                    </view>
                    <view class="pintuan_time">剩余<time :receiveData="item.endTime"></time></view>
                </view>
              </view>
              <view class="pintuan_item_right" :style="'background:'+(platformSetting.defaultColor)" :data-pintuanid="item.id" @click="goToPintuan">
                <text>去拼团</text>
              </view>
           </view>
           <view class="bottom_title"><text class="bottom_title_text">仅显示10个正在拼单的人</text></view>
         </scroll-view>
    </view>
  </view></uni-shadow-root>
</template>

<script>
import Time from '../time/time.vue'
global['__wxVueOptions'] = {components:{'time': Time}}

global['__wxRoute'] = 'partials/pintuan_popup/index'
const app = getApp()
Component({
  properties: {
    pintuanParam: {
      type: JSON,
      value: '0',
    },
  },
  data: {
    maskHidden:true,
  },
  ready:function(){
    console.log('=====ready====', this.data.pintuanParam)
    this.setData({
      platformSetting: app.globalData.setting.platformSetting,
    })
    this.getPintuanData()
  },
  methods: {
    goToPintuan:function(e){
      console.log("==goToPintuan===",e)
      let pintuanid;
      if (e.currentTarget.dataset.pintuanid){
        pintuanid = e.currentTarget.dataset.pintuanid
      }
      let data = { way: 'addPintuan', pintuanid: pintuanid}
      this.triggerEvent("goPintuan", { data});
    },
    getPintuanData: function () {
      let that = this;
      let data = this.data.pintuanParam
      var pintuanUrl = app.globalData.AddClientUrl("/wx_find_pintuan_records.html", data, 'post')
      wx.request({
        url: pintuanUrl.url,
        data: pintuanUrl.params,
        header: app.globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log('--------add----------')
          console.log(res.data)
          that.setData({ pintuanListData: res.data.relateObj.result })
        },
        fail: function (res) {
          app.globalData.loadFail()
        },
        complete: function () {
          wx.hideLoading()
        }
      })
    },
    closeFun:function(){
      this.triggerEvent('closePintuan', 0) //myevent自定义名称事件，父组件中使用
    },
  }
})
export default global['__wxComponents']['partials/pintuan_popup/index']
</script>
<style platform="mp-weixin">
.bg{
  position: fixed;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
  background: #000;
  filter:alpha(opacity:60); 
  opacity:0.6;  
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  z-index:1000;
}
scroll-view{
  width: 92%
}
.content{
  width:550rpx;
  height:800rpx;
  position:fixed;
  top:180rpx;
  left:50%;
  background:#fff;
  margin-left:-275rpx;
  z-index:1001;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius: 20rpx;
}
.close{
  position:fixed;
  top:160rpx;
  right:45px;
  width:50rpx;
  height:50rpx;
  border-radius:50rpx;
  background:#999;
  color:#fff;
  line-height:45rpx;
  text-align:center;
  z-index:1002;
}
.head_title{
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.head_title_text{
  font-size: 28rpx;
}
.box_share_pintuan{
  width: 550rpx;
  height: 800rpx;
  box-shadow: 2px 2px 10px #999;
  box-sizing: border-box
}
.pintuan_list{
  padding:10rpx 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pintuan_item{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom:1rpx solid #eee; 
}
.pintuan_item_left{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pintuan_item_left .user_head{
  height: 80rpx;
  width: 80rpx;
  padding:10rpx;
}
.pintuan_item_data{
  margin-left: 6rpx;
  font-size: 26rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.user_data{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20rpx;
}
.user_data .user_num{
  font-size: 20rpx;
  margin-left: 10rpx;
  color: #999;
}
.pintuan_item_data .pintuan_time{
  color: #aaa;
  font-size: 20rpx;
  letter-spacing: 2rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left:20rpx;
}
.pintuan_item_right{
  height: 50rpx;
  border-radius: 10rpx;
  padding: 6rpx 20rpx 6rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20rpx;
  color: #fff;
  font-size: 24rpx;
}
.bottom_title{
  height: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}
.bottom_title_text{
  color: #aaa
}
</style>